<template>
  <div class="layout-container">
    <div class="component-container">
      <a-button @click="getData">获取数据</a-button>
      <div
        class="component-item"
        draggable="true"
        v-for="(item, index) in componentList"
        :key="index"
        @dragstart="(e) => handleDragStart(e, item)"
      >
        {{ item.text }}
      </div>
    </div>
    <div id="main" class="component-panel">
      <div
        id="luckysheet"
        style="
          margin: 0px;
          padding: 0px;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0px;
          top: 0px;
        "
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { defHttp } from '@/utils/http/axios';

const { currentRoute } = useRouter();
const componentList = ref([
  {
    type: 'input',
    text: '测试1',
  },
]);
const handleDragStart = (e, item) => {
  console.log(e, item, 'indexItem');
};

onMounted(async () => {
  const { id } = currentRoute.value.query;
  const res = await defHttp.get({ url: '/reportExcel/test' })
    console.log(JSON.parse(res.jsonStr), 'rer')
  //配置项
  var options = {
    lang: 'zh',
    container: 'luckysheet', //luckysheet为容器id
    // enablePage: true,
    // showtoolbar: false, //是否第二列显示工具栏
    // showinfobar: false, //是否显示顶部名称栏
    // sheetFormulaBar: false,
    // showsheetbar: false,

    allowEdit: true,
    data: JSON.parse(res.jsonStr),
    hook: {
      cellDragStop: function (cell, postion, sheetFile, ctx, event) {
        luckysheet.setCellValue(postion.r, postion.c, '我是拖拽的值');
      },
      onTogglePager: function () {
        alert()
      }
    },
  };
  luckysheet.create(options);
  document.querySelector('.layout-container').ondragover = (e) => {
    console.log('dqdq');
    e.preventDefault();
  };
  document.querySelector('.layout-container').ondrop = (e) => {
    console.log(e, 'drop');
  };
  document.querySelector('#luckysheetcoltable_0').ondrop = (e) => {
    ;
    console.log('dddddop');
  };
  console.log(luckysheet, 'lic');
});
const getData = () => {
  const jsonData = luckysheet.getAllSheets();
  for (let i = 0; i < jsonData.length; i++) {
    //清空data数据，以celldata数据为主
    jsonData[i]['data'] = [];
  }
  console.log(JSON.stringify(jsonData), 'json');
};
</script>

<style scoped>
.layout-container {
  display: flex;
  height: 100%;
}
.layout-container .component-container {
  width: 200px;
  border: 1px solid red;
  height: 100%;
}
.layout-container .component-container .component-item {
  background: #fff;
  color: #000;
}
.layout-container .component-panel {
  position: relative;
  flex: 1;
  border: 1px solid green;
  height: 100%;
}
</style>
